ホームページでは、文字や画像だけでなく、音を使って表現することも可能となっています。そこで、今回および次回のホームページ作成講座は、「音」にまつわるテクニックを紹介してみましょう。第1回目となる今週は、クリックにより音を鳴らすテクニックです。

→
 
ホームページで音を鳴らすには、その元となる音声ファイルが必要となります。よって、まずは音声ファイルを用意することから始めなければいけません。
音声ファイルは、マイクを使って録音する、作曲ソフトで曲を作る、などの方法により作成します。また、自由にダウンロードして使えるフリーの音素材を活用するのもいいでしょう。なお、音声ファイルは、そのファイル形式にも十分注意するようにしてください。OSなどに関係なく、誰もが再生できるファイル形式とするのはもちろんのこと、MIDIファイルを使用するなど、ファイルの容量にも配慮しておく必要があります。


→
 
音声ファイルが用意できたら、EMBEDタグを使って音声ファイルをページ内に配置します。EMBEDタグはプラグイン機能を利用するための要素であり、src属性で指定したファイルを再生するのに最適なプラグインを自動的にページ内に埋め込む役割を担っています。そして、EMBEDタグによりページに埋め込まれたプラグインの再生ボタンをクリックすると、ページで音を鳴らすことができるようになります。

<b><font size="2" color="#FF0000">
●音を鳴らす場合は再生ボタンをクリック
</font></b>
<br>
<EMBED src="./m01.mid" type="audio/midi" autostart="false">

EMBEDタグの記述方法は、画像を表示するIMGタグとほぼ同じです。
src属性により音声ファイルの位置と名前を指定してください。type属性には音声ファイルのファイル形式を指定します。また、autostart属性は必ず「false」を指定してください。この指定を忘れると、ページが表示されると同時に音声ファイルの再生が開始されてしまいます。


→
 
先ほど紹介した方法では、ページ内にプラグイン機能を表示するための領域が必要となってしまいます。このような表示形式を好まれない方は、EMBEDタグにhidden属性を追加することでプラグイン機能を非表示とすることができます。しかし、これでは再生/停止ボタンを使用できなくなってしまいます。この問題は、新たに再生/停止ボタンを作成し、onClickイベントで直接EMBEDタグを操作することにより解決できます。こうすると、ページ内には再生/停止用のボタンだけが表示され、ボタンをクリックすることで音の再生や停止が行えるようになります。

<EMBED name="em1" src="m01.mid" hidden="true" autostart="false">
<form>
<input type="button" value="音楽を再生" onClick="document.em1.play()">
<input type="button" value="音楽を停止" onClick="document.em1.stop()">
</form>

EMBEDタグを記述する際は、必ずname属性でオブジェクト名を指定するようにしてください(上記の例では「em1」というオブジェクト名)。続けてプラグイン機能を非表示とするため、hidden属性に「true」を指定しておきます。また、作成した再生/停止ボタンには、onClickイベントを追加します。
onClickイベントでは、「document.オブジェクト名.play()」と記述すると再生機能が、「document.オブジェクト名.stop()」と記述すると停止機能が付加されるようになります。

なお、この例ではフォームボタンを使って「再生」や「停止」を行うためのボタンを作成していますが、これは必ずしもフォームボタンを使わなければいけないというわけではありません。オリジナル画像にonClickイベントを追加して、再生/停止ボタンを作成することもできます。


※この機能を利用するには、プラグインが必要です。ブラウザにMIDIファイルを再生できるプラグインをインストールしてください。

Windowsの方は→
Windows Media Player(Microsoft)
http://www.microsoft.com/japan/windows/windowsmedia/software/playerv7.asp

Macの方は→
Quicktime(Apple)
http://www.apple.co.jp/quicktime/download/

PCpylg}Wz O~yz Yahoo yV NTT-X Store

z[y[W NWbgJ[h COiq [ COsI COze